<template lang="pug">
.sidebar
  ul.sidebar-group(v-for="group in menus" v-if="$route.meta.name === group.metaName")
    .sidebar-item-menu(
      v-for="item in group.list"
      :key="item.id"
      v-if="item.children.length"
    )
      .sidebar-item-title {{item.label}}
      router-link.sidebar-item(
        v-for="children,index in item.children"
        :key="index"
        :to="{ name: children.routeName, query: { ...children.query }, params: { ...children.params } }"
        :class="{ 'router-link-active' : ($route.params.type ? $route.params.type : $route.meta.type) === children.routeName }"
      )
        .sidebar-item-bd {{children.label}}
    router-link.sidebar-item(
      v-for="item in group.list"
      :key="item.id"
      :to="{ name: item.routeName, query: { ...item.query }, params: { ...item.params } }"
      :class="{ 'router-link-active' : ($route.params.type ? $route.params.type : $route.meta.type) === item.routeName }"
      v-if="!item.children.length"
    )
      .sidebar-item-bd {{item.label}}
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'lowerSidebar',
  computed: {
    ...mapState({
      lowerSidebarShow: state => state.ui.lowerSidebar.show,
      cHost: state => state.user.user.c_host
    })
  },
  data () {
    return {
      menus: []
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  width: 140px;
  height: 100%;
  flex-shrink: 0;
  padding-top: 20px;
  background: #FFFFFF;
  box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.05);
}
.sidebar-item {
  width: 100%;
  height: 50px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sidebar-item-menu {
  width: 100%;
  cursor: pointer;
}
.sidebar-item-title {
  display: flex;
  align-items: center;
  height: 50px;
  padding-left: 24px;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 20px;
}
.sidebar-item-bd {
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 18px;
  display: flex;
  align-items: center;
  padding-left: 14px;
}
.router-link-active {
  .sidebar-item-bd {
    position: relative;
    background: #F2F9FF;
    border-radius: 5px;
    color: #0F73E6;
    font-weight: 600;
    &:after {
      content: '';
      position: absolute;
      right: 5px;
      width: 0;
      height: 0;
      border-width: 5px 7px;
      border-style: solid;
      border-color: transparent transparent transparent #0F73E6;
    } 
  }
}
</style>
